<%@include file="/WEB-INF/includes/header.jsp" %>

<tiles:insert page="/WEB-INF/templates/base-template.jsp" flush="true">

    <tiles:put name="pageHeader" type="string">
        ${video.title}
    </tiles:put>

    <tiles:put name="pageTitle" type="string">
        <a href="/app/index.html">Welcome to the world of entertainment</a>
    </tiles:put>

    <tiles:put name="content" type="string">
        <div id="videoFileDiv" class="hide">${tag.fileName}</div>
        <div id="tagsDiv" class="hide">${tag.tags}</div>

        <div id="video-container" style="margin: 0 auto;width:640px;">
            <video id="video" width="640" height="480" preload>
                <source src="${tag.fileName}" type="video/mp4">
                Your browser does not support the video tag.
            </video>

            <div id="video-controls">
                <button type="button" id="play-pause">Play</button>
                <input type="range" id="seek-bar" value="0">
                <button type="button" id="mute">Mute</button>
                <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
                <button type="button" id="full-screen">Full-Screen</button>
                <button type="button" id="startTag" class="hide">Start Tag</button>
                <button type="button" id="endTag" class="hide">End Tag</button>
                <button type="button" id="newTag" class="hide">New Tag</button>
            </div>
                <br/>
                <br/>
            <div style="font-size: x-large">
                Comment
            </div>
            <div id="comment">
                ${tag.comment}
            </div>
        </div>

    </tiles:put>

</tiles:insert>